<template>
  <div class="header">
    <!-- 背景渐变色区域 -->
    <div class="header_bgcorlor"></div>
    <div class="w">
      <!-- 头部定位区域 -->
      <div class="header_position">
        <span class="iconfont icon_location">&#xe61e;</span>
        <span class="header_address">送至：{{ address ? address.cgn_address : '暂无地址' }}</span>
        <span class="iconfont icon_arrow">&#xe63d;</span>
      </div>
      <!-- 头部搜索区域 -->
      <!-- <router-link to="/search" tag="div" class="iconfont header_search">&#xe62c;特仑苏44.9元一箱</router-link> -->
      <input v-model="keyword" class="search_input" type="text" placeholder="请输入关键词" />
      <div class="search_content" v-show="keyword">
        <ul>
          <li class="search_item border_bottom" v-for="item of list" :key="item.goods_id" @click="getGoodDetail(item.goods_id)">{{ item.goods_name }}</li>
          <li class="search_item border_bottom" v-show="hasNoData">没有找到匹配数据</li>
        </ul>
      </div>
      <!-- 轮播图 -->
      <div class="focus">
        <cube-slide
          ref="slide"
          :data="focusList"
          :initial-index="0"
          :interval="6000"
        >
          <cube-slide-item v-for="(item, index) in focusList" :key="index">
            <img :src="item" class="focus_img">
          </cube-slide-item>
        </cube-slide>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  data () {
    return {
      // 搜索关键字
      keyword: '',
      // 搜索结果
      list: [],
      timer: null,
      // 轮播图内容
      focusList: ['/upload/focus1.png', '/upload/focus2.jpg', '/upload/focus3.jpg', '/upload/focus4.jpg']
    }
  },
  watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.keyword) {
        this.list = []
        return
      }
      this.timer = setTimeout(() => {
        const result = []
        this.goodsList.forEach(item => {
          if (item.goods_name.indexOf(this.keyword) > -1) {
            result.push(item)
          }
        })
        this.list = result
      }, 100)
    }
  },
  computed: {
    ...mapState(['goodsList']),
    hasNoData () {
      return !this.list.length
    },
    address () {
      return JSON.parse(sessionStorage.getItem('address'))
    }
  },
  methods: {
    // 跳转到商品详情页
    getGoodDetail (id) {
      this.$store.commit('getGoodDetail', id)
      this.$router.push('/detail')
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  position: relative;
  height: 7.2rem;
}
// 背景渐变色区域
.header_bgcorlor {
  position: absolute;
  top: 0;
  width: 100%;
  height: 6rem;
  background-image: linear-gradient(to right, rgba(255, 20, 147, 1), rgba(255, 110, 180, 1));
  border-radius: 0 0 0.32rem 0.32rem;
  z-index: -2;
}
// 头部定位区域
.header_position {
  display: flex;
  width: 9rem;
  height: 1.2rem;
  line-height: 1.2rem;
  color: #fff;
  .icon_location {
    float: left;
    font-size: .72rem;
  }
  .header_address {
    flex: 1;
    font-size: .48rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .icon_arrow {
    float: right;
    font-size: .72rem;
  }
}
// 头部搜索区域
.search_input {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  font-size: .48rem;
  color: #999;
  text-align: center;
  border-radius: .5rem;
  background-color: #fff;
  padding: 0 .2rem;
}
// 搜索结果列表
.search_content {
  z-index: 99;
  position: absolute;
  top: 2.2rem;
  left: .4rem;
  right: .4rem;
  background: #eee;
  .search_item {
    line-height: 1rem;
    font-size: .48rem;
    padding-left: .2rem;
    background: #fff;
    color: #666;
  }
  .border_bottom {
    border-bottom: .02rem solid #eee;
  }
}
// 轮播图
.focus {
  overflow: hidden;
  width: 100%;
  height: 4.32rem;
  border-radius: .4rem;
  margin-top: .4rem;
}
.cube-slide-group {
  width: 100%;
  height: 4.32rem;
}
.focus_img {
  width: 100%;
  height: 100%;
}
</style>
